<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../styles/login.css" />
		<style>
			.mui-content {
				margin-top: 40px;
			}
			#regBtn {
				width: 80%;
				margin: 40px auto !important;
				padding: 8px 0;
				border-radius: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="usernameInput mui-input-row">
					<label class="usernameLabel">用户名</label>
					<input type="text" id='username' class="mui-input-clear" placeholder="请输入用户名">
				</div>
				<div class="usernameInput mui-input-row">
					<label class='pwdLabel'>密码</label>
					<input type="password" id='password' class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="usernameInput mui-input-row">
					<label class='pwdLabel'>确认密码</label>
					<input type="password" id='pwdAgain' class="mui-input-password" placeholder="请确认密码">
				</div>
				<button type="button" id='regBtn' class="mui-btn mui-btn-green mui-btn-block">注册</button>
			</form>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src='../js/md5.js'></script>
	<script type="text/javascript">
		(function($, doc) {
			$.init();
			$.plusReady(function() {
				var usr = doc.getElementById('username'),
					pwd = doc.getElementById('password'),
					pwdAgain = doc.getElementById('pwdAgain');
				doc.getElementById('regBtn').addEventListener('tap', function() { //tap为自定义事件
					//1、检测用户填写信息
					var userLen = usr.value.length,
						pwdLen = pwd.value.length,
						pwdALen = pwdAgain.value.length;
					if(userLen < 3 || userLen > 12) {
						$.alert('用户名长度在3-12位之间', 'Error', '我知道了', 'div');
						return false;
					}
					if(pwdLen < 3 || pwdLen > 12) {
						$.alert('密码长度在3-12位之间', 'Error', '我知道了', 'div');
						return false;
					}
					if(pwdAgain.value != pwd.value) {
						$.alert('两次输入的密码不一致', 'Error', '我知道了', 'div');
						return false;
					}

					//ajax请求
					$.ajax('http://plrabbit.com/face/register.php', {
						data: {
							username: usr.value,
							password: md5(pwd.value)
						},
						type: 'post',
						dataType: 'json',
						success: function(data) {
							//失败：repeated:重复
							//成功：success:id
							console.log(data.register);
							if(data.register == 'repeated') {
								plus.nativeUI.toast('用户名已经存在！');
								return false;
							}
							if(data.register == 'success') {
								plus.nativeUI.toast('注册成功！');
								plus.storage.setItem('usrId', data.id); //页面与页面的沟通就是本地存储
								plus.storage.setItem('username', usr.value);
								plus.storage.setItem('login', 'yes');
								plus.webview.getWebviewById('my').reload();
								plus.webview.close('login', 'slide-out-bottom');
							}

						},
						timeout: 5000,
						error: function(xhr, type) {
							plus.nativeUI.toast('哎呀！网络开小差啦');
						}
					});

				})
			})
		})(mui, document);
	</script>

</html>